<template>
    <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" :append-to-body="true"
        :close-on-click-modal="false">
        <el-form ref="dataForm" :rules="rules" :model="from" label-position="left" label-width="140px"
            style="width: 80%; margin-left:50px;">
            <el-row :gutter="40">
                <el-col :span="12">
                    <el-form-item label="核查数据源名称" prop="checkSourceid">
                        <el-select v-model="from.sourceName" class="filter-item" placeholder="请选择核查数据源名称"
                            @change="choseBelongs">
                            <el-option v-for="item, index in sourceData" :key="index" :label="item.sourceName"
                                 :value="{ id: item.id, sourceName: item.sourceName}" />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="核查表名称" prop="checkTableid">
                        <el-select v-model="from.tableName" class="filter-item" placeholder="请选择核查表名称" :disabled="!from.sourceId" @change="choseTable">
                            <el-option v-for="(item, index) in examinelist" :key="index" :label="item.tableName"
                            :value="{ id: item.id, tableName: item.tableName}" />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="核查字段名称" prop="columnName">
                        <el-select v-model="from.columnName" class="filter-item" placeholder="请选择字段名称" :disabled="!from.tableId"
                            @change="changeColumn">
                            <el-option v-for="(item, index) in Checkfieldlist" :key="index" :label="item.columnName"
                                :value="{ id: item.id, columnName: item.columnName}" />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="规则名称" prop="checkSourceid">
                        <el-select v-model="from.ruleName" class="filter-item" placeholder="请选择规则名称" @change="changeRule">
                            <el-option v-for="item, index in ruleslist" :key="index" :label="item.name" :value="{ id: item.id, ruleName: item.name}" />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12" v-if="from.ruleName=='一致性规则'">
                    <el-form-item label="规则值" prop="ruleValue">
                        <el-input v-model="from.ruleValue" class="filter-item" placeholder="多个参数用，隔开"  />
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">
                {{ $t('table.cancel') }}
            </el-button>
            <el-button type="primary" :loading="loading" @click="createData">
                {{ $t('table.confirm') }}
            </el-button>
        </div>
    </el-dialog>
</template>
  
<script>
import { queryRules } from '@/api/job/metadataJob'
import { fetchcolumnList } from '@/api/metadata/column'
import { getSourceList } from '@/api/job/metadataJob'
import {getTableList} from '@/api/masterdata/masterdataTable'
export default {
    name: 'addFrom',
    data() {
        return {
            rules: {
            },
            temp: {
                page: 1,
                limit: 999,
                tableId: ''
            },
            from: {
                columnId: '',
                columnName: '',
                ruleId: '',
                ruleName: '',
                tableName:'',
                tableId:'',
                sourceName:'',
                sourceId:''
            },
            textMap: {
                update: '编辑',
                create: '新建'
            },
            loading: false,
            dialogFormVisible: false,
            dialogStatus: '',
            Checkfieldlist: [],//检查字段名称
            ruleslist: [],//规则名称
            sourceData: [],//数据源名称
            examinelist: []//核查表名称
        }
    },
    methods: {
        setList(id) {
            // fetchcolumnList(this.temp).then(res => {
            //     if (res.data.code === 0) {
            //         this.Checkfieldlist = res.data.data
            //     } else {
            //         this.$message.error(res.data.msg)
            //     }
            // })
            queryRules().then(res => {
                if (res.data.code === 0) {
                    this.ruleslist = res.data.data
                } else {
                    this.$message.error(res.data.msg)
                }
            })
            getSourceList().then(res => {
                if (res.data.code === 200) {
                    this.sourceData = res.data.data
                } else {
                    this.$message.error(res.data.msg)
                }
            })
        },
        //选择所属数据源
      choseBelongs(data) {
        this.from.tableId=''
        this.from.tableName=''
        this.from.sourceId=data.id
        this.from.sourceName=data.sourceName
            getTableList({ sourceId: data.id }).then(res => {
                if (res.data.code === 200) {
                    this.examinelist = res.data.data
                }else{
                    this.$message.error(res.data.msg)
                }
            })
        },
        //选择表名称
        choseTable(data){
            this.from.tableId=data.id
            this.from.tableName=data.tableName
            this.from.columnId =''
            this.from.columnName=''
            fetchcolumnList({sourceId:data.id}).then(res => {
                if (res.data.code === 0) {
                    this.Checkfieldlist = res.data.data
                } else {
                    this.$message.error(res.data.msg)
                }
            })
        },
        //选择列
        changeColumn(item) {
            this.from.columnId = item.id
            this.from.columnName = item.columnName
        },
        changeRule(item) {
            this.from.ruleId = item.id
            this.from.ruleName = item.ruleName
        },
        createData() {
            this.dialogFormVisible = false
            this.$emit('addList', this.from)
        },
        resetTemp() {
            this.loading = false
            this.from= {
                columnId: '',
                columnName: '',
                ruleId: '',
                ruleName: '',
                tableName:'',
                tableId:'',
                sourceName:'',
                sourceId:''
            }
        },
        handleCreate() {
            this.resetTemp()
            this.dialogStatus = 'create'
            this.dialogFormVisible = true
            this.setList()
            this.$nextTick(() => {
                this.$refs['dataForm'].clearValidate()
            })
        },
        handleUpdate(data, id) {

            this.resetTemp()
            this.dialogStatus = 'update'
            this.dialogFormVisible = true
            // this.temp.tableId=data.tableId
            this.temp.sourceId = data.tableId
            this.setList(id)
            this.$nextTick(() => {
                this.$refs['dataForm'].clearValidate()
            })
        },
        updateData() {

        }
    }
}
</script>
<style>
.el-dialog {
    width: 70%;
}
</style>

  